@media screen and (width <=1180px) {
    :deep(.ol-overlaycontainer-stopevent) {
        --ol-control-left: 20px; // 小屏幕时调整左侧距离
    }
}

@media screen and (width <=780px) {

    :deep(.ol-custom-zoom),
    :deep(.ol-custom-zoom-slider),
    :deep(.ol-custom-mouse-position) {
        display: none !important; // 小屏幕时隐藏控件
    }
}

:deep(.ol-overlaycontainer-stopevent) {
    --ol-control-top: 20px; // 控件距离顶部距离
    // --ol-control-right:60px; // 控件距离右侧距离
    --ol-control-bottom: 20px; // 控件距离底部距离
    --ol-control-left: 30px; // 控件距离左侧距离
    --ol-control-font-color: #555; // 控件字体颜色
    --ol-control-border-radius: 6px; // 控件圆角
    --ol-control-background-color: rgb(255 255 255 / 70%); // 控件背景颜色
}

/** 比例尺控件样式 */
:deep(.ol-custom-scale-line) {
    position: absolute;
    bottom: var(--ol-control-bottom);
    left: var(--ol-control-left);
    padding: 0 10px 10px;
    font-size: 1rem;
    color: var(--ol-control-font-color);
    background-color: var(--ol-control-background-color);
    border-radius: 6px;

    .ol-custom-scale-line-inner {
        position: relative;
        text-align: center;
        border-bottom: 2px solid var(--ol-control-font-color);

        &::before {
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 2px;
            height: 8px;
            content: "";
            background-color: var(--ol-control-font-color);
        }

        &::after {
            position: absolute;
            right: 0;
            bottom: -5px;
            width: 2px;
            height: 8px;
            content: "";
            background-color: var(--ol-control-font-color);
        }
    }
}

/** 缩放控件 */
:deep(.ol-custom-zoom) {
    position: absolute;
    top: var(--ol-control-top);
    left: var(--ol-control-left);
    display: flex;
    flex-direction: column;
    width: 40px;
    font-size: 1rem;

    .ol-custom-zoom-in,
    .ol-custom-zoom-out {
        padding: 6px;
        background-color: var(--ol-control-background-color);
        border-radius: var(--ol-control-border-radius);
    }

    .ol-custom-zoom-out {
        margin-top: 5px;
    }

}

/** 鼠标位置控件 */
:deep(.ol-custom-mouse-position) {
    position: absolute;
    right: var(--ol-control-left);
    bottom: var(--ol-control-bottom);
    padding: 6px 12px;
    font-size: 1rem;
    color: var(--ol-control-font-color);
    background-color: var(--ol-control-background-color);
    border-radius: var(--ol-control-border-radius);
}

/** 滑块缩放控件 */
:deep(.ol-custom-zoom-slider) {
    position: absolute;
    top: calc(var(--ol-control-top) + 95px); // 放在缩放按钮下方
    left: calc(var(--ol-control-left) + 10px); // 向右偏移背景多余的部分
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 150px;
    background-color: transparent;
    border-radius: var(--ol-control-border-radius);
    transition: all 0.3s ease;

    // 滑块手柄
    .ol-custom-zoom-slider-thumb {
        position: absolute;
        left: 50%;
        width: 16px;
        height: 16px;
        cursor: grab;
        background: linear-gradient(135deg, #31a0d2, #2890c2);
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
        transform: translateX(-50%);
        transition: all 0.2s ease;

        &:hover {
            width: 18px;
            height: 18px;
            background: linear-gradient(135deg, #2890c2, #1f7fb2);
            box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
            transform: translateX(-50%) scale(1.1);
        }

        &:active {
            cursor: grabbing;
            transform: translateX(-50%) scale(0.95);
        }
    }

    // 滑块轨道
    &::before {
        position: relative;
        width: 4px;
        height: 100%;
        cursor: pointer;
        content: "";
        background: linear-gradient(to bottom, #31a0d2, #e0e0e0);
        border-radius: 2px;
        transition: all 0.2s ease;
    }

    // 滑块轨道背景
    &::after {
        position: absolute;
        top: -12px;
        left: 50%;
        z-index: -1;
        width: 40px;
        height: calc(100% + 24px);
        content: "";
        background-color: var(--ol-control-background-color);
        border-radius: var(--ol-control-border-radius);
        transform: translateX(-50%);
    }
}

/** 概览图控件 */
:deep(.ol-custom-overviewmap) {
    position: absolute;
    bottom: calc(var(--ol-control-bottom) + 50px);
    left: var(--ol-control-left);
    border-radius: var(--ol-control-border-radius);

    .ol-overviewmap-map {
        position: relative;
        width: 200px;
        height: 150px;
        overflow: hidden;
        background: var(--ol-control-background-color);
        border: 2px solid rgb(49 160 210 / 30%);
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }

    // 概览图切换按钮样式
    button {
        position: absolute;
        bottom: -8px;
        left: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
        transition: all 0.3s ease;

        &:hover {
            box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
            transform: scale(1.1);
        }

        &::before {
            font-size: 14px;
            color: white;
            content: "📍";
        }
    }

    // 折叠状态样式
    &.ol-collapsed {

        .ol-overviewmap-map {
            display: none; // 隐藏地图容器
        }

        button {
            bottom: 0;
            left: 0;
        }
    }

    // 概览图内的视口框样式
    .ol-overviewmap-box {
        cursor: grab;
        background-color: rgb(49 160 210 / 10%);
        border: 3px solid #31a0d2;
        border-radius: 2px;
        box-shadow: 0 0 0 2px rgb(49 160 210 / 30%);

        &:active {
            cursor: grabbing;
        }
    }
}